<template>
    <div class="ware_house_form_container">
        <el-form ref="wareHouseForm" :model="formData" :rules="rules" label-width="100px">
            <el-form-item label="分类" prop="type_id" v-if="false">
                <el-select v-model="formData.type_id" placeholder="请选择分类" clearable
                           style="width: 100%;">
                    <el-option v-for="(item, index) in typeList" :key="index"
                               :label="item.display_text" :value="item.value"/>
                </el-select>
            </el-form-item>
            <el-form-item label="编号" prop="code">
                <el-input v-model="formData.code" placeholder="请输入编号" clearable/>
            </el-form-item>
            <el-form-item label="名称" prop="name">
                <el-input v-model="formData.name" placeholder="请输入名称" clearable/>
            </el-form-item>
            <el-form-item label="简称" prop="short_name">
                <el-input v-model="formData.short_name" placeholder="请输入简称" clearable/>
            </el-form-item>
            <el-form-item label="联系电话" prop="phone">
                <el-input v-model="formData.phone" placeholder="请输入联系电话" clearable/>
            </el-form-item>
            <el-form-item label="地图地址" v-if="false">
                <el-button type="default" @click="openBMapDialog">选择</el-button>
            </el-form-item>
            <el-form-item label="地址" prop="address">
                <el-input v-model="formData.address" type="textarea" placeholder="请输入地址"
                          maxlength="200" show-word-limit clearable/>
            </el-form-item>
            <el-form-item label="经度" prop="lng" v-if="false">
                <el-input v-model="formData.lng" disabled/>
            </el-form-item>
            <el-form-item label="纬度" prop="lat" v-if="false">
                <el-input v-model="formData.lat" disabled/>
            </el-form-item>
            <el-form-item label="备注" prop="note_info">
                <el-input type="textarea" v-model="formData.note_info" placeholder="请输入备注"
                          maxlength="200" show-word-limit clearable/>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import BaiduMap from "@common/components/map/Baidu";

export default {
    name: "WareHouseForm",
    props: {
        row: {
            type: Object,
            default: null,
        },
        typeList: {
            type: Array,
            default: () => [],
        },
    },
    data () {
        return {
            formData: {},
            rules: {
                type_id: [{required: true, message: '请选择分类', trigger: 'change'}],
                code: [{required: true, message: '请输入编号', trigger: 'blur'}],
                name: [{required: true, message: '请输入名称', trigger: 'blur'}],
            },
        }
    },
    watch: {
        row: {
            handler () {
                this.init();
            },
            deep: true,
            immediate: true,
        },
    },
    methods: {
        init () {
            const _this = this;
            if (!_this.row) {
                return;
            }
            if (_this.$refs.wareHouseForm) {
                _this.$refs.wareHouseForm.clearValidate();
            }
            _this.formData = $.extend({}, _this.row);
        },
        // 百度地图
        openBMapDialog () {
            let _this = this;
            let center = undefined;
            if (_this.$utils.isNotEmpty(_this.formData.lng) && _this.$utils.isNotEmpty(_this.formData.lat)) {
                center = {
                    lng: _this.formData.lng,
                    lat: _this.formData.lat,
                };
            }
            _this.$dialog({
                title: '百度地图选点',
                width: '900px',
                component: {
                    value: BaiduMap,
                    props: {
                        center,
                        point: center,
                    },
                },
                confirmBtn: {
                    type: 'primary',
                    text: '确定',
                    click (dialog, { component }) {
                        if (component && typeof component.confirm === 'function') {
                            component.confirm().then(data => {
                                if (data) {
                                    _this.$set(_this.formData, 'address', data.address);
                                    _this.$set(_this.formData, 'lng', data.lng);
                                    _this.$set(_this.formData, 'lat', data.lat);
                                    dialog.visible = false;
                                }
                            });
                        }
                    },
                },
            });
        },
        async confirm () {
            const _this = this;
            let valid = await _this.validateForm('wareHouseForm');
            if (!valid) {
                return false;
            }
            let subData = $.extend({}, _this.formData);
            return _this.fetchData(_this.$api.API_SaveJxcStockWarehouse, subData).then(() => {
                _this.$message.success('保存成功！');
                return true;
            }).catch(() => {
                return false;
            });
        },
    },
}
</script>

<style lang="less" rel="stylesheet/less" scoped>
.ware_house_form_container {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
</style>
